this.pasta = this.pasta || {};
this.pasta.webgui = this.pasta.webgui || {};

(function() {

this.pasta.webgui.SimplePage = pasta.webgui.ContainerControl.extend(
{
	init : function() 
	{
		this._super();
		
		this.tabWidth = 80;
		this.caption = "";
		
		this._onChange = null;
		
		this.canvas.style.width = "100%";
		this.canvas.style.height = "100%";
		
		this.icon = null;
	},
	
	getIcon : function()
	{
		return this.icon;
	},
	
	setIcon : function(data)
	{
		this.icon = data;
	},
	
	getCaption : function()
	{
		return this.caption;
	},
	
	setCaption : function(data)
	{
		this.caption = data;
		
		if (this._onChange != null)
			this._onChange.callHandler(this);
	},
	
	getTabWidth : function()
	{
		return this.tabWidth;
	},
	
	setTabWidth : function(data)
	{
		this.tabWidth = data;
		
		if (this._onChange != null)
			this._onChange.callHandler(this);
	},
	
	getWidth : function()
	{
		if (this.getParent() != null)
			return this.getParent().getWidth();
		else
			return 0;
	},
	
	getHeight : function()
	{
		if (this.getParent() != null)
			return (this.getParent().getHeight() - this.getParent().getTabHeight());
		else
			return 0;
	},
	
	//------------------- Event -------------------
	
	getOnChange : function()
	{
		if (this._onChange == null)
			this._onChange = new pasta.util.EventObj();
		
		return this._onChange;
	}
});

this.pasta.webgui.SimplePageControl = pasta.webgui.ContainerControl.extend(
{
	init : function() 
	{
		this._super();
		
		this.tabHeight = 20;
		this.lineColor = "#666666";
		
		this.clientCanvas.style.top = (this.tabHeight + 1) + "px";
		this.clientCanvas.style.height = (this.getHeight() - this.tabHeight - 1) + "px";
		this.clientCanvas.style.overflow = "hidden";
		
		this.canvas.style.borderBottom = "1px solid " + this.lineColor;
		
		this.selectedPage = null;
		
		this.borderTopLeft = document.createElement("div");
		this.borderTopLeft.id = this.cid + "_borderTopLeft";
		this.borderTopLeft.style.position = "absolute";
		this.borderTopLeft.style.left = "0px";
		this.borderTopLeft.style.top = (this.tabHeight + 1) + "px";
		this.borderTopLeft.style.width = "5px";
		this.borderTopLeft.style.height = "1px";
		this.borderTopLeft.style.borderTop = "1px solid " + this.lineColor;
		this.canvas.appendChild(this.borderTopLeft);
		
		this.borderTopRight = document.createElement("div");
		this.borderTopRight.id = this.cid + "_borderTopRight";
		this.borderTopRight.style.position = "absolute";
		this.borderTopRight.style.left = "0px";
		this.borderTopRight.style.top = (this.tabHeight + 1) + "px";
		this.borderTopRight.style.width = "5px";
		this.borderTopRight.style.height = "1px";
		this.borderTopRight.style.borderTop = "1px solid " + this.lineColor;
		this.canvas.appendChild(this.borderTopRight);
		
		this.tabFont = new pasta.util.Font();
		this.tabFont.setColor("#555555");
		this.tabFont.getOnChange(this, this.tabFontChange);
		
		this.tabFontActive = new pasta.util.Font();
		this.tabFontActive.setColor("#000000");
		
		this.tabFontOver = new pasta.util.Font();
		this.tabFontOver.setColor("#FF0000");
	},

	addControl : function(data)
	{
		if (data instanceof pasta.webgui.SimplePage)
		{
			data.getOnChange().setHandler(this, this.tabChange);
			
			// add tab
			var tabLeft = 5;
			
			for (var i = 0; i < this.controls.getLength(); i++)
			{
				tabLeft += this.controls.get(i).getTabWidth();
			}
			
			data.tab = document.createElement("div");
			data.tab.id = this.cid + "_tab" + data.cid;
			data.tab.style.position = "absolute";
			data.tab.style.left = tabLeft + "px";
			data.tab.style.top = "0px";
			data.tab.style.width = data.tabWidth + "px";
			data.tab.style.height = this.tabHeight + "px";
			data.tab.style.color = "#FFFFFF";
			data.tab.style.overflow = "hidden";
			
			if (data.getIcon() == null)
			{
				data.tab.style.textAlign = "center";
				data.tab.innerHTML = "<span style='position:relative; top:3px'>" + data.caption + "<span>";
			}
			else
				data.tab.innerHTML = "<img src='" + data.getIcon() + "' style='vertical-align: middle;'>" + data.caption;
			
			data.tab.style.title = data.caption;
			
			data.tab.style.cursor = "pointer";
			data.tab.style.fontSize = "12px";
			data.setVisible(false);
			this.canvas.appendChild(data.tab);
			
			var id = this.cid;
			
			data.tab.onmouseover = function(e) { if (!e) e = window.event; var obj = pasta.webgui._controlList[id]; if (obj instanceof pasta.webgui.Control) obj.doTabMouseOver(data); };
			data.tab.onmouseout = function(e) { if (!e) e = window.event; var obj = pasta.webgui._controlList[id]; if (obj instanceof pasta.webgui.Control) obj.doTabMouseOut(data); };
			data.tab.onmousedown = function(e) { if (!e) e = window.event; var obj = pasta.webgui._controlList[id]; if (obj instanceof pasta.webgui.Control) obj.doTabMouseDown(data); };
			data.tab.ontouchstart = function(e) { if (!e) e = window.event; var obj = pasta.webgui._controlList[id]; if (obj instanceof pasta.webgui.Control) obj.doTabMouseDown(data); };
			
			this.tabFont.applyFont(data.tab);
			
			this._super(data);
			
			if (this.controls.getLength() == 1)
				this.setSelectedPage(data);
			else
				this.setSelectedPage(this.selectedPage);
		}
	},
	
	clear : function()
	{
		this._super();
		
		this.canvas.innerHTML = "";
		
		this.selectedPage = null;
		
		this.borderTopLeft.style.width = "0px";
		this.borderTopRight.style.width = "0px";
		
		this.canvas.appendChild(this.clientCanvas);
		this.canvas.appendChild(this.borderTopLeft);
		this.canvas.appendChild(this.borderTopRight);
	},
	
	getTabHeight : function()
	{
		return this.tabHeight;
	},
	
	setTabHeight : function(data)
	{
		this.tabHeight = data;
		
		this.clientCanvas.style.top = (this.tabHeight + 1) + "px";
		this.clientCanvas.style.height = (this.getHeight() - this.tabHeight - 1) + "px";
		
		this.borderTopLeft.style.top = (this.tabHeight + 1) + "px";
		this.borderTopRight.style.top = (this.tabHeight + 1) + "px";
	},
	
	tabChange : function(sender)
	{
		if (sender.tab != undefined)
		{
			data.tab.innerHTML = "<span style='position:relative; top:3px'>" + data.caption + "</span>";
			data.tab.style.title = data.caption;
			sender.tab.style.width = sender.tabWidth + "px";
		}
	},
	
	tabFontChange : function(sender)
	{
		for (var i = 0; i < this.controls.getLength(); i++)
		{
			var data = this.controls.get(i);
			
			this.tabFont.applyFont(data.tab);
		}
	},
	
	doTabMouseOver : function(page)
	{
		this.tabFontOver.applyFont(page.tab);
	},
	
	doTabMouseOut : function(page)
	{
		if (page == this.selectedPage)
			this.tabFontActive.applyFont(page.tab);
		else
			this.tabFont.applyFont(page.tab);
	},
	
	doTabMouseDown : function(page)
	{
		this.setSelectedPage(page);
	},
	
	//------------------- Setter & Getter ------------------
	
	getSelectedPage : function(page)
	{
		return this.selectedPage;
	},
	
	setSelectedPage : function(page)
	{
		this.selectedPage = page;
		
		var left = 5;
		var found = false;
		
		for (var i = 0; i < this.controls.getLength(); i++)
		{
			var data = this.controls.get(i);
			
			if (data == page)
			{
				data.tab.style.borderLeft = "1px solid " + this.lineColor;
				data.tab.style.borderTop = "1px solid " + this.lineColor;
				data.tab.style.borderRight = "1px solid " + this.lineColor;
				//data.tab.style.background = "rgba(0, 0, 0, 0.4)";
				data.setVisible(true);
				
				if (data.getIcon() == null)
					data.tab.innerHTML = "<span style='font-weight:bold;position:relative;top:1px;'><b>" + data.caption + "</b></span>";
				else
					data.tab.innerHTML = "<img src='" + data.getIcon() + "' style='vertical-align: middle;padding-top: 5px;padding-left: 10px;padding-right: 10px;'><span style='font-weight:bold'><b>" + data.caption + "</b></span>";
				
				data.tab.style.title = data.caption;
				
				this.borderTopLeft.style.width = (left + 1) + "px";
				
				this.borderTopRight.style.left = (left + 1 + data.getTabWidth()) + "px";
				this.borderTopRight.style.width = (this.getWidth() - (left + data.getTabWidth() + 1)) + "px";
				
				this.tabFontActive.applyFont(data.tab);
			}
			else
			{
				data.tab.style.borderLeft = "";
				data.tab.style.borderTop = "";
				data.tab.style.borderRight = "";
				
				if (data.getIcon() == null)
					data.tab.innerHTML = "<span style='position:relative; top:3px;'>" + data.caption + "<span>";
				else
					data.tab.innerHTML = "<img src='" + data.getIcon() + "' style='vertical-align: middle;padding-top: 5px;padding-left: 10px;padding-right: 10px;'>" + data.caption;
				
				data.tab.style.title = data.caption;
				data.tab.style.background = "rgba(0, 0, 0, 0)";
				data.setVisible(false);
				
				left += data.getTabWidth();
				
				this.tabFont.applyFont(data.tab);
			}
		}
		
		if (this._onTabChange != null)
			this._onTabChange.callHandler(this, this.selectedPage);
	},
	
	setWidth : function(data)
	{
		this._super(data);
		
		this.setSelectedPage(this.selectedPage);
	},
	
	setHeight : function(data)
	{
		this._super(data);
		
		this.clientCanvas.style.height = (this.getHeight() - this.tabHeight - 1) + "px";

	},
	
	//------------------- Event -------------------
	
	getOnTabChange : function()
	{
		if (this._onTabChange == null)
			this._onTabChange = new pasta.util.EventObj();
		
		return this._onTabChange;
	}
});
	
})();